<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Getting Cross Domain JSON Data Using Y.jsonp()</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Getting Cross Domain JSON Data Using Y.jsonp()</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><style scoped>
#out {
    margin-top: 1em;
}
#out caption  {
    color: #f80;
    font-size: 123%;
    display: table-caption;
    *display: block;
}
</style>


<div class="intro">
    <p>This example illustrates basic use of the <code>Y.jsonp( url, callback )</code> method, provided by the <code>jsonp</code> module.</p>

    <p>For this example, we will use <a href="http://develop.github.com/">GitHub's webservice API</a>, fetching user information about some members of the YUI team.</p>
</div>

<div class="example yui3-skin-sam">
<div id="demo">
    <select id="github_user">
        <option value="yui">YUI Library</option>
        <option value="allenrabinovich">Allen Rabinovich</option>
        <option value="davglass">Dav Glass</option>
        <option value="derek">Derek Gathright</option>
        <option value="ericf">Eric Ferraiuolo</option>
        <option value="jenny">Jenny Donnelly</option>
        <option value="lsmith">Luke Smith</option>
        <option value="msweeney">Matt Sweeney</option>
        <option value="reid">Reid Burke</option>
        <option value="rgrove">Ryan Grove</option>
        <option value="sdesai">Satyen Desai</option>
        <option value="tripp">Tripp Bridges</option>
    </select>
    <input type="button" id="demo_btn" value="Get user info">
    <div id="out">
    </div>
</div>

<script>
YUI().use("jsonp", "node",function (Y) {

    var user      = Y.one("#github_user"),
        githubAPI = "http://github.com/api/v2/json/user/show/",
        template  = // assignment continued below
        
    '<table>' +
        '<caption>GitHub user <code>{login}</code> ({name})</caption>' +
        '<thead>' +
            '<tr>' +
                '<th>Repositories</th>' +
                '<th>Gists</th>' +
                '<th>Followers</th>' +
                '<th>Following</th>' +
            '</tr>' +
        '</thead>' +
        '<tbody>' +
            '<tr>' +
                '<td>{public_repo_count}</td>' +
                '<td>{public_gist_count}</td>' +
                '<td>{followers_count}</td>' +
                '<td>{following_count}</td>' +
            '</tr>' +
        '</tbody>' +
    '</table>';

    function handleJSONP(response) {
        Y.one("#out").setContent(Y.Lang.sub(template, response.user));
    }

    Y.one("#demo_btn").on("click", function (e) {
        // e.g. http://github.com/api/v2/json/user/show/yui?callback={callback}
        var url = githubAPI + user.get("value") + "?callback={callback}";

        Y.jsonp(url, handleJSONP);
    });

});
</script>

</div>

<h3>The data</h3>
<p>The structure of the JavaScript object returned from GitHub's JSONP API for user info will look like this:</p>

<pre class="code prettyprint">{
    user: {
        gravatar_id: &quot;fc2cca...&quot;,
        login: &quot;username&quot;
        name: &quot;User&#x27;s Name&quot;,
        ...,

        public_repo_count: 10,
        public_gist_count: 20,
        following_count: 30,
        followers_count: 40
    }
}</pre>


<p>We'll use these objects to populate HTML templates with data <em>{placeholder}</em>s using <code>Y.Lang.sub( template, object )</code>.  The resulting HTML can then simply be passed to any of YUI 3's DOM creation methods, such as <code>node.setContent( html )</code> or <code>node.append( html )</code>.  We'll do this in the function that will receive the JSONP response (seen below).</p>

<h3>Format the JSONP url</h3>
<p>Typical JSONP urls are formatted like</p>
<p>&quot;http://example.com/service?format=json&<em>callback=handleJSONP</em>&quot;.</p>
<p>To use YUI 3's JSONP utility, replace the name of the callback function in the url with placeholder text &quot;{callback}&quot;.</p>

<pre class="code prettyprint">&#x2F;&#x2F; BEFORE
var url = &quot;http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;show&#x2F;yui?callback=handleJSONP&quot;;

&#x2F;&#x2F;AFTER
var url = &quot;http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;show&#x2F;yui?callback={callback}&quot;;</pre>


<p>Then simply pass the url and the function that should handle the JSONP response object to <code>Y.jsonp(&lt;em&gt;url&lt;&#x2F;em&gt;, &lt;em&gt;handleJSONP&lt;&#x2F;em&gt;)</code>.</p>

<pre class="code prettyprint">function handleJSONP(response) {
    Y.one(&quot;#out&quot;).setContent(Y.Lang.sub(template, response.user));
}

Y.one(&quot;#demo_btn&quot;).on(&quot;click&quot;, function (e) {
    &#x2F;&#x2F; e.g. http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;show&#x2F;yui?callback={callback}
    var url = githubAPI + user.get(&quot;value&quot;) + &quot;?callback={callback}&quot;;

    Y.jsonp(url, handleJSONP);
});</pre>


<h3 id="fullcode">Full Code Listing</h3>
<h4>HTML</h4>
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
    &lt;select id=&quot;github_user&quot;&gt;
        &lt;option value=&quot;yui&quot;&gt;YUI Library&lt;&#x2F;option&gt;
        &lt;option value=&quot;allenrabinovich&quot;&gt;Allen Rabinovich&lt;&#x2F;option&gt;
        &lt;option value=&quot;davglass&quot;&gt;Dav Glass&lt;&#x2F;option&gt;
        &lt;option value=&quot;derek&quot;&gt;Derek Gathright&lt;&#x2F;option&gt;
        &lt;option value=&quot;ericf&quot;&gt;Eric Ferraiuolo&lt;&#x2F;option&gt;
        &lt;option value=&quot;jenny&quot;&gt;Jenny Donnelly&lt;&#x2F;option&gt;
        &lt;option value=&quot;lsmith&quot;&gt;Luke Smith&lt;&#x2F;option&gt;
        &lt;option value=&quot;msweeney&quot;&gt;Matt Sweeney&lt;&#x2F;option&gt;
        &lt;option value=&quot;reid&quot;&gt;Reid Burke&lt;&#x2F;option&gt;
        &lt;option value=&quot;rgrove&quot;&gt;Ryan Grove&lt;&#x2F;option&gt;
        &lt;option value=&quot;sdesai&quot;&gt;Satyen Desai&lt;&#x2F;option&gt;
        &lt;option value=&quot;tripp&quot;&gt;Tripp Bridges&lt;&#x2F;option&gt;
    &lt;&#x2F;select&gt;
    &lt;input type=&quot;button&quot; id=&quot;demo_btn&quot; value=&quot;Get user info&quot;&gt;
    &lt;div id=&quot;out&quot;&gt;
    &lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>


<h4>JavaScript</h4>
<pre class="code prettyprint">&lt;script&gt;
YUI().use(&quot;jsonp&quot;, &quot;node&quot;,function (Y) {

    var user      = Y.one(&quot;#github_user&quot;),
        githubAPI = &quot;http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;show&#x2F;&quot;,
        template  = &#x2F;&#x2F; assignment continued below
        
    &#x27;&lt;table&gt;&#x27; +
        &#x27;&lt;caption&gt;GitHub user &lt;code&gt;{login}&lt;&#x2F;code&gt; ({name})&lt;&#x2F;caption&gt;&#x27; +
        &#x27;&lt;thead&gt;&#x27; +
            &#x27;&lt;tr&gt;&#x27; +
                &#x27;&lt;th&gt;Repositories&lt;&#x2F;th&gt;&#x27; +
                &#x27;&lt;th&gt;Gists&lt;&#x2F;th&gt;&#x27; +
                &#x27;&lt;th&gt;Followers&lt;&#x2F;th&gt;&#x27; +
                &#x27;&lt;th&gt;Following&lt;&#x2F;th&gt;&#x27; +
            &#x27;&lt;&#x2F;tr&gt;&#x27; +
        &#x27;&lt;&#x2F;thead&gt;&#x27; +
        &#x27;&lt;tbody&gt;&#x27; +
            &#x27;&lt;tr&gt;&#x27; +
                &#x27;&lt;td&gt;{public_repo_count}&lt;&#x2F;td&gt;&#x27; +
                &#x27;&lt;td&gt;{public_gist_count}&lt;&#x2F;td&gt;&#x27; +
                &#x27;&lt;td&gt;{followers_count}&lt;&#x2F;td&gt;&#x27; +
                &#x27;&lt;td&gt;{following_count}&lt;&#x2F;td&gt;&#x27; +
            &#x27;&lt;&#x2F;tr&gt;&#x27; +
        &#x27;&lt;&#x2F;tbody&gt;&#x27; +
    &#x27;&lt;&#x2F;table&gt;&#x27;;

    function handleJSONP(response) {
        Y.one(&quot;#out&quot;).setContent(Y.Lang.sub(template, response.user));
    }

    Y.one(&quot;#demo_btn&quot;).on(&quot;click&quot;, function (e) {
        &#x2F;&#x2F; e.g. http:&#x2F;&#x2F;github.com&#x2F;api&#x2F;v2&#x2F;json&#x2F;user&#x2F;show&#x2F;yui?callback={callback}
        var url = githubAPI + user.get(&quot;value&quot;) + &quot;?callback={callback}&quot;;

        Y.jsonp(url, handleJSONP);
    });

});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Get basic GitHub user info using a Y.jsonp(url, callback).">
                                        <a href="jsonp-github.html">Getting Cross Domain JSON Data Using Y.jsonp()</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.">
                                        <a href="jsonp-gallery.html">Reusing a JSONPRequest Instance to Poll a Remote Server</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            

            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
